<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>测试history对象(实例)上的函数</title>

        <style type="text/javascript">
            /* 飞燕说是我故意写的 */
            div:first-child {
                border: 1px solid blue ;
            }

            div>button {
                margin: 10px ;
            }
        </style>

    </head>
    <body>

        <h3>测试history对象(实例)上的函数</h3>

        <div class="wrapper">
            <button type="button" class="back">back</button>
            <button type="button" class="forward">forward</button>
            <button type="button" class="go">go</button>
            <button type="button" class="length">length</button>
        </div>

        <script type="text/javascript">
            let backBtn = document.querySelector( '.back' );
            let backListener = ()=>{
                history.back(); // 后退到前一项访问记录
            }
            backBtn.addEventListener( 'click' , backListener , false );

            let forwardBtn = document.querySelector( '.forward' );
            let forwardListener = ()=>{
                history.forward(); // 前进到后一项访问记录
            }
            forwardBtn.addEventListener( 'click' , forwardListener , false );

            let goBtn = document.querySelector( '.go' );
            let goListener = ()=>{
                history.go(3);
            }
            goBtn.addEventListener( 'click' , goListener , false );

            let lengthBtn = document.querySelector( '.length' );
            let lengthListener = ()=>{
                console.log( history.length );
            }
            lengthBtn.addEventListener( 'click' , lengthListener , false );
        </script>
        
    </body>
</html>